<template>
	<div class="container">
		<SearchForm @reset="reset" @search="search" ref="search" labelWidth="100px">
			<el-form-item label="业务单号:">
				<el-input
					clearable
					v-model="queryParams.orderCode"
					placeholder="请输入业务单号"></el-input>
			</el-form-item>
			<el-form-item label="客户名称:">
				<el-input
					clearable
					v-model="queryParams.earnCustomerName"
					placeholder="请输入业务单号"></el-input>
			</el-form-item>
			<el-form-item label="开票状态:" prop="invoiceStatus">
				<el-select filterable v-model="queryParams.invoiceStatus" clearable>
					<template v-for="dict in dict.type.settle_invoice_status">
						<el-option
							:label="dict.label"
							:value="dict.value"
							:key="dict.value"></el-option>
					</template>
				</el-select>
			</el-form-item>
			<el-form-item label="车辆运营公司:">
				<el-input
					clearable
					v-model="queryParams.carRunCompany"
					placeholder="请输入车辆运营公司"></el-input>
			</el-form-item>
		</SearchForm>

		<div class="card-wrap card-padding">
			<div class="table-title-wrap justify-end">
				<el-button
					type=""
					icon="el-icon-upload2"
					size="mini"
					@click="exportFile"
					v-hasPermi="['finance:manage:settle:list:export']">
					导出
				</el-button>
			</div>
			<div class="tableBox">
				<table-page
					:loading="loading"
					:dataList="dataList"
					:total="total"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					:border="true"
					@setSizeCurrent="getList">
					<!-- 操作插槽 -->
					<template slot="tableColAc">
						<el-table-column label="操作" align="center" width="200">
							<template slot-scope="scope">
								<div class="handle">
									<el-button
										size="mini"
										type="text"
										@click="
											toPage({
												path: '/finance/settleDetail',
												name: 'SettleDetail',
												query: {
													settleId: scope.row.settleId,
												},
											})
										"
										v-hasPermi="['finance:manage:settle:list:look']">
										查看
									</el-button>

									<el-button
										v-if="
											scope.row.settleAccountsType == 4 ||
											scope.row.settleAccountsType == 14
												? scope.row.isInvoices == 1
												: scope.row.invoiceStatus == 0
										"
										size="mini"
										type="text"
										v-hasPermi="['finance:manage:settle:list:invoice']"
										@click="showInvoice(scope.row, 0)">
										开票
									</el-button>
									<el-button
										v-if="
											scope.row.settleAccountsType == 4 ||
											scope.row.settleAccountsType == 14
												? scope.row.isInvoices == 2
												: scope.row.invoiceStatus == 1
										"
										size="mini"
										type="text"
										v-hasPermi="['finance:manage:settle:list:invoice']"
										@click="showInvoice(scope.row, 1)">
										查看发票
									</el-button>
									<el-button
										v-if="
											scope.row.settleAccountsType == 4
												? scope.row.isNegativeInvoices == 1
												: false
										"
										size="mini"
										type="text"
										v-hasPermi="['finance:manage:settle:list:invoice']"
										@click="showInvoice(scope.row, 0, 'isNegativeInvoices')">
										开负数发票
									</el-button>

									<el-button
										v-if="
											scope.row.settleAccountsType == 4
												? scope.row.isNegativeInvoices == 2
												: false
										"
										size="mini"
										type="text"
										v-hasPermi="['finance:manage:settle:list:invoice']"
										@click="
											showInvoice(scope.row, 1, 'isNegativeNumberlnvoice')
										">
										查看负数发票
									</el-button>
									<el-button
										v-if="scope.row.notifyState == 1"
										size="mini"
										type="text"
										v-hasPermi="['finance:manage:settle:list:notify']">
										通知
									</el-button>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="结算单号" align="center" width="190">
							<template slot-scope="scope">
								{{ scope.row.settleCode }}
							</template>
						</el-table-column>
						<el-table-column label="通知方式" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.notifyTypeStr }}
							</template>
						</el-table-column>
						<el-table-column
							label="通知时间"
							align="center"
							show-overflow-tooltip
							min-width="100px">
							<template slot-scope="scope">
								{{ scope.row.notifyDate | formatTime(0) }}
							</template>
						</el-table-column>
						<el-table-column label="通知状态" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								<span
									:class="[
										scope.row.notifyState == 0 || scope.row.notifyState == 2
											? 'state_red'
											: '',
									]">
									{{ scope.row.notifyStateStr }}
								</span>
							</template>
						</el-table-column>
						<el-table-column label="开票状态" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								<dict-tag
									:options="dict.type.settle_invoice_status"
									:value="scope.row.invoiceStatus" />
							</template>
						</el-table-column>
						<el-table-column label="客户名称" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.earnCustomerName }}
							</template>
						</el-table-column>
						<el-table-column
							label="车辆运营公司"
							align="center"
							min-width="160"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.carRunCompany | filterNull }}
							</template>
						</el-table-column>
						<el-table-column label="业务单号" align="center" width="190">
							<template slot-scope="scope">
								<TooltipDiv :content="sliceStr(scope.row.orderCode)">
									<template #content>
										<div
											class="tooltipItem"
											v-for="item in getOrderCodeArr(scope.row.orderCode)">
											{{ item }}
										</div>
									</template>
								</TooltipDiv>
							</template>
						</el-table-column>
						<el-table-column label="所属月份" align="center" min-width="100px">
							<template slot-scope="scope">
								{{ A_formatTime(scope.row.startTime, 'YYYY-MM') }}
							</template>
						</el-table-column>
						<el-table-column label="使用日" align="center">
							<template slot-scope="scope">
								{{ scope.row.useDuration | getUseDuration }}
							</template>
						</el-table-column>
						<el-table-column
							label="项目"
							align="center"
							show-overflow-tooltip
							min-width="150">
							<template slot-scope="scope">
								{{ scope.row.settleAccountsTypeStr }}
							</template>
						</el-table-column>
						<el-table-column label="金额" align="center" min-width="180px">
							<template slot-scope="scope">
								<div>
									{{ format_thousand(scope.row.settleAccountsAmount) }}
								</div>
							</template>
						</el-table-column>
					</template>
				</table-page>
			</div>
		</div>

		<InvoiceDialog ref="invoiceDialog" @success="getList" :type="dialogType"></InvoiceDialog>
		<el-dialog
			:title="Dialog.showInvoice.title"
			:visible.sync="Dialog.showInvoice.show"
			destroy-on-close
			width="80%">
			<div class="dialog_showInv" :v-loading="Dialog.showInvoice.loading">
				<div v-if="!Dialog.showInvoice.loading">
					<div v-if="Dialog.showInvoice.data.length > 0">
						<div v-for="(item, index) in Dialog.showInvoice.data">
							<div class="mini-title">客户信息</div>
							<AForm
								state="readonly"
								ref="formData1"
								:config="formList"
								v-model="Dialog.showInvoice.data[index]"
								:layout="{ inline: true }"></AForm>
							<div class="mini-title">开票信息</div>
							<AForm
								ref="formData2"
								state="readonly"
								:config="formList2"
								v-model="Dialog.showInvoice.data[index]"
								:layout="{ inline: true }"></AForm>
						</div>
					</div>
					<div v-else>
						<el-empty description="暂无发票信息！"></el-empty>
					</div>
				</div>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="Dialog.showInvoice.show = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import AForm from '@/components/A/A-form/form/index.vue';
	import { settleInvoiceAdd, settleInvoiceDetail } from '@/api/finance/manage/settle/api';
	import TooltipDiv from '@/components/A/A-form/tooltipDiv/index.vue';
	import * as apis from '@/api/finance/manage/settle/api.js';
	import InvoiceDialog from '@/views/finance/manage/settle/components/InvoiceDialog.vue';
	export default {
		name: 'Settle',
		components: { InvoiceDialog, TooltipDiv, AForm },
		dicts: ['settle_invoice_status', 'invoice_type'],
		data() {
			return {
				row: {},
				Dialog: {
					showInvoice: {
						loading: false,
						show: false,
						data: [],
					},
				},
				dialogType: 1,
				value: '',
				options: '',
				total: 0,
				loading: true,
				queryParams: {
					applyUserName: '',
					pageNum: 1,
					pageSize: 10,
				},
				dataList: [],
			};
		},

		mounted() {
			this.getList();
		},
		activated() {
			this.getList();
		},
		computed: {
			formList() {
				return [
					{
						label: '客户名称',
						prop: 'customerName',
						state: 'readonly',
					},
					{
						label: '税号',
						prop: 'taxpayerCode',
						state: 'readonly',
						show: this.row.invoiceName == 2,
					},
					{
						label: '开户银行',
						prop: 'customerBankName',
						state: 'readonly',
					},
					{
						label: '银行账号',
						prop: 'customerBankAccountName',
						state: 'readonly',
					},
					{
						label: '地址',
						prop: 'customerAddr',
						rules: true,
						type: 'input',
						state: 'readonly',
					},
					{
						label: '联系电话',
						prop: 'phone',
						state: 'readonly',
					},
					{
						label: '邮箱',
						prop: 'customerMail',
						state: 'readonly',
					},
				];
			},
			formList2() {
				return [
					{
						label: '发票类型',
						prop: 'invoiceType',
						type: 'select',
						dict: {
							list: this.dict.type.invoice_type,
						},
						rules: true,
						state: 'readonly',
					},
					{
						label: '发票金额',
						prop: 'invoiceAmount',
						type: 'price',
						state: 'readonly',
					},
					{
						label: '发票号码',
						prop: 'invoiceCode',
						type: 'input',
						rules: true,
					},

					{
						label: '发票附件',
						prop: 'invoiceImg',
						type: 'upload',
						upload: {
							limit: 1,
							type: 2,
						},
						rules: true,
					},
				];
			},
		},
		filters: {
			getUseDuration(data) {
				let word = '-';
				switch (data) {
					case '1':
						word = '一个月';
						break;
					default:
						break;
				}
				return word;
			},
		},
		methods: {
			getInvoiceState(row) {
				if (row.settleAccountsType == 4 || row.settleAccountsType == 14) {
					return row.transientState;
				}
				return row.invoiceStatus;
			},
			sliceStr(str) {
				return str?.slice(1, -1);
			},
			getOrderCodeArr(str) {
				if (this.Empty(str)) return [];
				let arr = str?.slice(1, -1)?.split(',');
				if (this.Empty(arr)) return [];
				return arr;
			},
			showInvoice(row, type, isNegativeNumberlnvoice) {
				this.row = row;
				if (type == 0) {
					this.dialogType = type;
					this.$refs.invoiceDialog.show(row, isNegativeNumberlnvoice);
				} else {
					this.Dialog.showInvoice.loading = true;
					this.Dialog.showInvoice.show = true;
					this.Dialog.showInvoice.title =
						isNegativeNumberlnvoice == 'isNegativeNumberlnvoice'
							? '查看负数发票'
							: '查看发票';
					settleInvoiceDetail(row.settleId)
						.then(res => {
							if (res.code == '200') {
								let arr = res.data;
								if (Array.isArray(res.data)) {
									arr = res.data;
								} else {
									arr = [res.data];
								}
								if (row.settleAccountsType == 4 || row.settleAccountsType == 14) {
									arr = arr.filter(item => {
										if (isNegativeNumberlnvoice == 'isNegativeNumberlnvoice') {
											return item.isNegativeNumberInvoice === '1';
										}
										return item.isNegativeNumberInvoice === '0';
									});
								}

								this.Dialog.showInvoice.data = arr;
							}
						})
						.catch(err => {
							console.log(err);
						})
						.finally(() => {
							this.Dialog.showInvoice.loading = false;
						});
				}
			},
			exportFile() {
				let params = this._.cloneDeep(this.queryParams);
				this.download(apis.ExportFile, params, `应收结算_${new Date().getTime()}.xlsx`);
			},
			toPage(route) {
				this.$router.push(route);
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
				this.getList();
			},
			getList() {
				this.loading = true;
				apis?.List(this.queryParams)
					.then(res => {
						if (res.code == 200) {
							this.dataList = res.rows;
							this.total = res.total;
						}
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false;
					});
			},
			viewDetail(data) {
				this.$router.push({
					path: '/finance/paymentDetail',
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 15px;
		box-sizing: border-box;
	}
	.searchForm {
		padding: 15px;
		display: grid;
		gap: 10px 15px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		background-color: #fff;
		.item {
			display: flex;
			align-items: center;
			.label {
				width: 80px;
				font-size: 14px;
				margin-right: 15px;
				vertical-align: middle;
				color: #606266;
				font-weight: 700;
			}
			.content {
				flex: 1;
			}
		}
	}
	.tableBox {
		background-color: #fff;
		padding-bottom: 20px;
	}
	.searchbtns {
		padding: 20px 15px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	::v-deep .el-form-item {
		.el-form-item__label {
			white-space: nowrap;
		}
	}
	.handle {
		width: 100%;
		display: flex;
		// flex-direction: column;
		justify-content: space-around;
		flex-wrap: wrap;
		::v-deep .el-button + .el-button {
			margin: 0;
		}
	}

	.tooltipItem {
		line-height: 1.5em;
	}
	.dialog_showInv {
		display: flex;
		flex-direction: column;
		gap: 50px 0;
		min-height: 400px;
	}
</style>
